import React from 'react';
import { createForm } from 'rc-form';
import { district } from 'antd-mobile-demo-data';

import { Picker, DatePicker, List, Checkbox, InputItem, TextareaItem } from 'antd-mobile';
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';

const CheckboxItem = Checkbox.CheckboxItem;

// 如果不是使用 List.Item 作为 children
const CustomChildren = (props) => {
  return (
    <div
      onClick={props.onClick}
      style={{ backgroundColor: '#fff', height: 45, lineHeight: '45px', padding: '0 15px' }}
    >
      {props.children}
      <span style={{ float: 'right' }}>{props.extra}</span>
    </div>
  );
};

export default class FormBook extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
      category: props.category,
      code: props.code,
      modal: false,
      url: '',
      form:'',
      title:'123123123'
    }
  }

  componentWillMount() {
    var url = "/memory/category/" + this.state.category + "/code/" + this.state.code;
    // axios.get(url).then(res => {
    //   console.log(res.data.data);
    //   this.setState({
    //     data: res.data.data,
    //   });
    // });
  }

  componentWillReceiveProps = (props) => {
    this.setState({
      category: props.category,
      code: props.code
    })
  }

  render() {
    // const { getFieldProps } = this.props.form;
    const { pickerValue, dpValue } = this.state;
    return (<form className="form" onsubmit="return false">
      <List renderHeader={() => <b>{this.state.title}</b>}>
        
        <InputItem />
        <InputItem type="number" />
        <InputItem pattern="[0-9]*" required />
        <h3>{this.state.title}</h3>
        <TextareaItem
            placeholder="click the button below to focus"
            data-seed="logId"
            autoHeight
            ref={el => this.customFocusInst = el}
          />
        <CheckboxItem onChange={(e) => console.log('checkbox', e)}>
          CheckboxItem
        </CheckboxItem>
        <DatePicker
          mode="date"
          title="选择日期"
          extra="可选,小于结束日期"
          // {...getFieldProps  ('date1', { initialValue: new Date() }) }
          minDate={new Date(2019, 6, 6)}
          maxDate={new Date(2026, 6, 6)}
        >
          <List.Item arrow="horizontal">日期</List.Item>
        </DatePicker>
      </List>
      <InputItem type="submit" value="submit" />
    </form>);
  }
}

